<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加课程</title>
</head>
<!-- 引入 layui.css -->
<link rel="stylesheet" href="//unpkg.com/layui@2.6.8/dist/css/layui.css">
<!-- 引入 layui.js -->
<script src="//unpkg.com/layui@2.6.8/dist/layui.js"></script>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script src="../../js/fun.js"></script>



<body>
<form class="layui-form layui-form-pane" action="">

    <div class="layui-form-item">
        <label class="layui-form-label">课程名称</label>
        <div class="layui-input-block">
            <input type="text" name="name" required  lay-verify="required" placeholder="请输入课程名称" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item" id="colist">

    </div>

    <div class="layui-form-item" id="majorlist">

    </div>

    <div class="layui-form-item" id="roomlist">

    </div>

    <div class="layui-form-item" id="timelist">

    </div>

    <div class="layui-form-item" id="teacherlist">

    </div>


    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="formDemo">添加</button>
        </div>
    </div>
</form>
</body>




<!--院系模板-->
<script id="co" type="text/html">
    <div>

        <label class="layui-form-label test" >开设院系</label>
        <div class="layui-input-block">
            <select name="co" lay-verify="required" id="cco" lay-filter="cco" >
                {{#  layui.each(d, function(index, item){ }}
                <option value="{{item.id}}">{{item.name}}</option>
                {{#  }); }}

            </select>

        </div>
    </div>
</script>

<!--专业模板-->
<script id="major" type="text/html">
    <div>

        <label class="layui-form-label">专业</label>
        <div class="layui-input-block">
            <select name="major" lay-verify="required" id="cmajor" lay-filter="cmajor">
                {{#  layui.each(d, function(index, item){ }}
                <option value="{{item.id}}">{{item.name}}</option>
                {{#  }); }}
            </select>

        </div>
    </div>
</script>


<!--时间段模板-->
<script id="time" type="text/html">
    <div>

        <label class="layui-form-label">时间段</label>
        <div class="layui-input-block">
            <select name="time" lay-verify="required" id="ctime" lay-filter="ctime">
                {{#  layui.each(d, function(index, item){ }}
                <option value="{{item.id}}">{{item.detail}}({{item.content}})</option>
                {{#  }); }}
            </select>

        </div>
    </div>
</script>


<!--教室模板-->
<script id="room" type="text/html">
    <div>

        <label class="layui-form-label">上课教室</label>
        <div class="layui-input-block">
            <select name="room" lay-verify="required" id="croom" lay-filter="croom">
                {{#  layui.each(d, function(index, item){ }}
                <option value="{{item.id}}">{{item.name}} ({{item.address}})</option>
                {{#  }); }}
            </select>

        </div>
    </div>
</script>

<!--教师模板-->
<script id="teacher" type="text/html">
    <div>

        <label class="layui-form-label">授课教师</label>
        <div class="layui-input-block">
            <select name="teacher" lay-verify="required" id="cteacher" lay-filter="croom">
                {{#  layui.each(d, function(index, item){ }}
                <option value="{{item.id}}">{{item.name}} ({{item.title}})</option>
                {{#  }); }}
            </select>

        </div>
    </div>
</script>

<script>

    // 数据的定义
    window.colist = [];
    window.majorlist = [];
    window.classlist = [];

    function  load(){
        layui.use(['form','layer','laytpl'], function(){
            window.form = layui.form;
            window.layer = layui.layer;
            window.laytpl = layui.laytpl


            //请求教室
            $.post(Api+"/co/getRooms",{},function (data){
                if(data.code != "0"){
                    layer.msg("请求失败")
                }else {

                    let getTpl = room.innerHTML
                        ,view = document.getElementById('roomlist');
                    laytpl(getTpl).render(data.data, function(html){

                        view.innerHTML = html;

                        form.render()

                    });

                }
            })


            //请求老师
            $.post(Api+"/Teacher/getList",{},function (data){
                if(data.code != "0"){
                    layer.msg("请求失败")
                }else {

                    let getTpl = teacher.innerHTML
                        ,view = document.getElementById('teacherlist');
                    laytpl(getTpl).render(data.data, function(html){

                        view.innerHTML = html;

                        form.render()

                    });

                }
            })


            //请求教室
            $.post(Api+"/course/timeslist",{},function (data){
                if(data.code != "0"){
                    layer.msg("请求失败")
                }else {

                    let getTpl = time.innerHTML
                        ,view = document.getElementById('timelist');
                    laytpl(getTpl).render(data.data, function(html){

                        view.innerHTML = html;

                        form.render()

                    });

                }
            })

            $.post(Api+"/co/getList",{},function (data){
                if(data.code != "0"){
                    layer.msg("请求失败")
                }else {
                    colist =  data.data

                    var getTpl = co.innerHTML
                        ,view = document.getElementById('colist');
                    laytpl(getTpl).render(data.data, function(html){
                        console.log(html)
                        view.innerHTML = html;
                        form.render()



                        form.on('select(cco)', function(data){
                            let coid = data.value

                            $.post(Api+"/major/getList",{cid:coid},function (data){
                                if(data.code != "0"){
                                    layer.msg("请求失败")
                                }else {

                                    let getTpl = major.innerHTML
                                        ,view = document.getElementById('majorlist');
                                    laytpl(getTpl).render(data.data, function(html){

                                        view.innerHTML = html;

                                        form.render()



                                        form.on('select(cco)', function(data){
                                            let coid = data.value

                                            $.post(Api+"/major/getList",{cid:coid},function (data){
                                                if(data.code != "0"){
                                                    layer.msg("请求失败")
                                                }else {

                                                    let getTpl = major.innerHTML
                                                        ,view = document.getElementById('majorlist');
                                                    laytpl(getTpl).render(data.data, function(html){

                                                        view.innerHTML = html;

                                                        form.render()

                                                    });

                                                }
                                            })

                                        });
                                    });

                                }
                            })
                        });

                    });

                }
            })


            //监听提交
            form.on('submit(formDemo)', function(data){
                // layer.msg(JSON.stringify(data.field));
                let registData = data.field

                console.log(registData)
                $.post(Api+"/course/add",{
                   name:registData.name,
                    teacher:registData.teacher,
                    time:registData.time,
                    address:registData.room,
                    major:registData.major
                },function (res){
                    if(res.code == "200"){
                        layer.open({
                            title:"提示",
                            content:"成功"
                        })
                    }else {
                        layer.msg("失败")
                    }
                })
                return false;
            });


        });

    }

    document.addEventListener("DOMContentLoaded", load);

</script>
</html>